<template>
  <div>
    <div class="wrapper">
      <div class="table_wrap">
        <div class="flex justify_sb">
          <div class="flex">
            <el-button type="primary" size="mini" @click="handleAddStageID">新增阶段ID</el-button>
            <el-button type="primary" size="mini" @click="handleAddStage">新增阶段</el-button>
            <el-button type="primary" size="mini" @click="handleExportJson">输出JSON</el-button>
            <importJson :store="1" @handleImport="handleImport"></importJson>
          </div>
          <!-- <div class="flex" style="margin-left: 50px;">
            <div class="" style="margin-right: 12px;">
              阶段ID:
            </div>
            <el-button type="primary" size="mini" @click="handleExportStageIDJson">输出JSON</el-button>
            <importJson :store="0" @handleImport="handleImportStageID"></importJson>
          </div> -->
        </div>
        <el-table :data="tableData" border align="left" size="mini" height="450" style="width: 75vw;">
          <el-table-column label="阶段ID" width="160">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.StageID" placeholder="请选择">
                <el-option v-for="item in enSTrackStage" :key="item.key" :label="item.name" :value="item.value"
                  :disabled="tableData.some(r=>{return r.StageID==item.value})">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="阶段名称" width="160">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.name" placeholder="请输入内容">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="煤机触发方向" width="160">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.TriggerDir" placeholder="请选择">
                <el-option v-for="item in enSTrackRunDir" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="执行动作组" width="160">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.RunnersID" multiple placeholder="请选择">
                <el-option v-for="item in enShearerRunnerCode" :key="item.STrackID" :label="item.name"
                  :value="item.STrackID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="参数组" width="160">
            <template slot-scope="scope">
              <!--  <el-select size="mini" v-model="scope.row.ParaIDs" multiple placeholder="请选择">
                <el-option v-for="item in enParaID" :key="item.key" :label="item.name" :value="item.key"></el-option>
              </el-select> -->
              <el-select filterable allow-create default-first-option size="mini" v-model="scope.row.ParaIDs" multiple
                placeholder="请选择">
                <el-option v-for="item in parasIDsCode" :key="item.value" :label=" item.value +' '+item.label"
                  :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="支持架型" width="160">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.shieldTypeOpt" multiple placeholder="请选择">
                <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-button @click="handleClickUpdata(scope.row)" type="text" size="small">更新数据</el-button>
              <el-button type="text" size="small" @click="handleClickDelete(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--  <div style="display: flex;">

          <div id="stageMount" style="flex: 1;"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs';
  import enParaID from './data/enParaID';
  import enSTrackState from './data/enSTrackStage.js';
  import enSTrackRunDir from './data/enSTrackRunDir';
  import enShieldType from './data/enShieldType';
  import enSTrackControl from './data/enSTrackControl';
  // import enShearerRunnerCode from './data/enShearerRunnerCode.js';
  import InDB from "./utils/initDB.js"
  import exportJson from "./utils/exportJson.js"
  import parasIDsCode from "./data/paraDataCode.js"
  import importJson from "./components/importJson.vue"
  export default {
    components: {
      importJson
    },
    data() {
      return {
        parasIDsCode: parasIDsCode,
        enShieldType: enShieldType,
        enSTrackControl: enSTrackControl,
        enShearerRunnerCode: [],
        enSTrackStage: [],
        enSTrackRunDir: enSTrackRunDir,
        enParaID: enParaID,
        showDelete: false,
        showEditor: false,
        dialogVisible: false,
        dialogTitle: false,
        form: {},
        toolsChangeKey: null,
        routeQuery: {},
        tableData: [],
        graph: null,
        stageList: {
          edges: [],
          nodes: []
        }
      };
    },

    methods: {
      handleImportStageID(res) {
        this.enSTrackStage = res
      },
      handleExportStageIDJson() {
        exportJson(this.enSTrackStage, 'StageID')
      },
      handleImport(res) {
        this.tableData = res
      },
      handleExportJson() {
        let list = this.tableData.map((item, i) => {
          let obj = {
            ...item,
            Name: item.name,
            RunnerCount: item.RunnerIDs ? item.RunnerIDs.length : 0,
            ParaCount: item.ParaIDs ? item.ParaIDs.length : 0,
          }
          if (i == this.tableData.length - 1) {
            obj.NextStageID = this.tableData[0].StageID
            return obj
          }
          obj.NextStageID = this.tableData[i + 1].StageID
          return obj
        })
        exportJson(list, '13_STrackStage')
      },
      async handleClickDelete(r, i) {
        console.log(r);
        this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let result = await InDB.STrackStages.delete(r.id)
          if (!result) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData.splice(i, 1)
          } else {
            this.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async handleClickUpdata(r) {
        console.log(r);
        if (!r.hasOwnProperty('name') || !r.name) {
          this.$notify.error({
            title: '错误',
            message: '名字不能为空'
          });
          return
        }
        if (!r.hasOwnProperty('StageID') || !r.StageID) {
          this.$notify.error({
            title: '错误',
            message: '阶段ID不能为空'
          });
          return
        }
        if (!r.hasOwnProperty('TriggerDir') || !r.TriggerDir) {
          this.$notify.error({
            title: '错误',
            message: '煤机触发方向不能为空'
          });
          return
        }
        if (!r.hasOwnProperty('ParaIDs') || r.ParaIDs.length < 1) {
          this.$notify.error({
            title: '错误',
            message: '参数组不能为空'
          });
          return
        }
        if (!r.hasOwnProperty('shieldTypeOpt') || r.shieldTypeOpt.length < 1) {
          this.$notify.error({
            title: '错误',
            message: '支持架型不能为空'
          });
          return
        }
        let row = null
        let storeData = await InDB.STrackStages.all()
        if (storeData.length && r.hasOwnProperty("id")) {
          row = await InDB.STrackStages.get(r.id)
        }
        let checkName = storeData.some(item => {
          return item.name == r.name
        })
        let checkStageID = storeData.some(item => {
          return item.StageID == r.StageID
        })
        if (storeData.length && checkName && !row) {
          this.$notify.error({
            title: '错误',
            message: '名字重复'
          });
          return
        }
        if (storeData.length && checkStageID && !row) {
          this.$notify.error({
            title: '错误',
            message: '阶段 ID重复'
          });
          return
        }
        let result = await InDB.STrackStages.put({
          ...r
        })
        if (result) {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success'
          });
          this.tableData = await InDB.STrackStages.all()
        } else {
          this.$notify.error({
            title: '失败',
            message: '更新失败'
          });
        }
      },
      handleAddStage() {
        this.tableData.push({})
      },
      async handleAddStageID() {
        let lastRow = await InDB.enSTrackState.last()
        let num = lastRow.name.split(' ')[1] * 1
        let key = num + 1
        let keyName = "STRACK_STAGE_" + key

        let obj = {
          key: keyName,
          name: '状态 ' + key,
          value: lastRow.value++
        }

        await InDB.enSTrackState.add({
          ...obj
        })
        this.enSTrackStage = await InDB.STrackStages.all()
      },
      onSubmit() {
        if (this.dialogTitle == false && this.toolsChangeKey) {
          this.toolsList[this.toolsChangeKey] = this.form;
          this.dialogVisible = false;
          return;
        }
        this.toolsList.push(this.form);
        this.dialogVisible = false;
      },
    },
    async created() {
      let stageList = await InDB.enSTrackState.all()
      if (stageList.length) {
        this.enSTrackStage = stageList
      } else {
        this.enSTrackStage = enSTrackState
      }
      this.enShearerRunnerCode = await InDB.actionsPool.all()
      this.tableData = await InDB.STrackStages.all()
    },
    mounted() {},
  };
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .flex_center {
    align-items: center;
  }

  .ju_sb {
    justify-content: space-between;
  }

  .wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
  }

  .table_wrap {
    /* width: calc(100% - 250px); */
  }

  .card_item {
    display: flex;
    width: 220px;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f6f6f6;
  }

  .card_item+.card_item {
    margin-top: 8px;
  }
</style>
